<div class="alert alert-success" align="center" style="font-size:inherit">
    <div style="float:left;">
        Swastik
    </div>
    <div>
       {{date | date:'dd-MM-yyyy HH:mm:ss'}}
    </div>
</div>
<table style="width:50%; margin-left:200px" >
    <tbody border="1">
    <tr style="width:100%">
        <td style="width:25%"> 
                <label for="billdate" class="control-label">Bill Date</label>
        </td>
        <td>
                <input type="date" style="height:24px" ng-modal="swastik.billdate"/>
        </td>
    </tr>
    <tr>    
        <td style="width:7%"> 
                <label for="billno" class="control-label">Bill No</label>
        </td>
        <td>
                <input type="number" style="height:24px" ng-modal="swastik.billno"/> 
        </td>
     </tr>
     <tr>  
        <td style="width:6%"> 
               <label for="partyname" class="control-label">Party Name</label>   
        </td>
        <td>
               <input type="text" style="height:24px" ng-modal="swastik.partyname"/>
        </td>
     </tr>
     <tr>   
        <td style="width:25%"> 
                <label for="detail" class="control-label">Detail</label> 
        </td>
        <td>
            <textarea cols="30" rows="1"  ng-modal="swastik.details"></textarea>   
        </td>
     </tr>   
    </tbody>
</table>

   <!--  <div style="margin-left:90px; width:100%">
      <div style="float:left;width:30%">
        <label for="billdate" class="control-label">Bill Date</label>             
      </div>
      <div style="float:left;margin-left: 4px; width:70%">  
        <input type="date" style="height:24px" ng-modal="swastik.billdate"/>
      </div>  
    </div>
    <div style="margin-left:103px; width:100%">
      <div style="float:left">    
        <label for="billno" class="control-label">Bill No</label>             
      </div>
      <div style="float:left margin-left:4px" >  
        <input type="number" style="height:24px" ng-modal="swastik.billno"/>
      </div> 
    </div>
    <div style="margin-left:70px;">
        <label for="partyname" class="control-label">Party Name</label>             
        <input type="text" style="height:24px" ng-modal="swastik.partyname"/>
    </div>
    <div style="margin-left:108px;">
        <div style="float:left">
         <label for="detail" class="control-label" align="center"><p>Detail</p></label>             
        </div>
        <div style="float:left;margin-left: 4px;"> 
         <textarea cols="30" rows="1"  ng-modal="swastik.detail"></textarea>
        </div>
    </div> -->
<table class="table table-bordered table-hover table-condensed" border="1" style="padding:0px">
    <tbody>
    <tr style="width:100%" >
        <td style="width:25%"> 
                <label for="billdate" class="control-label">Item Name</label>
        </td>
        <td style="width:7%"> 
                <label for="billdate" class="control-label">Weight</label>
        </td>
        <td style="width:6%"> 
                <label for="billdate" class="control-label">Price</label>
        </td>
        <td style="width:7%"> 
                <label for="billdate" class="control-label">Amount</label>
        </td>
        <td style="width:25%"> 
                <label for="billdate" class="control-label">Detail</label>
        </td>
        <td style="width:10%">
                <label for="billdate" class="control-label">Total Amount</label>
        </td>
        <td style="width:10%">
            <label for="billdate" class="control-label"> Add</label>
        </td>
        <td style="width:10%">
            <label for="billdate" class="control-label">Delete</label>
        </td>
     </tr>  

    </tbody>
    <tr style="width:100%">
        <td style="width:25%"> 
                <input class="form-control input-lg" ng-model="swastik.itemname" type="text" placeholder="Item Name">
        </td>
        <td style="width:7%"> 
                <input class="form-control input-sm" ng-model="swastik.qty" type="text" placeholder="Qty">
        </td>
        <td style="width:6%"> 
                <input class="form-control input-sm" ng-model="swastik.price" type="text" placeholder="Price">
        </td>
        <td style="width:7%"> 
                <input class="form-control input-sm" ng-model="swastik.amount" type="text" placeholder="Amount">
        </td>
        <td style="width:25%"> 
                <input class="form-control input-sm" ng-model="swastik.detail" type="text" placeholder="Detail">
        </td>
        <td style="width:10%">
                <input class="form-control input-sm" ng-model="swastik.total" type="text" placeholder="Total">
        </td>
        <td style="width:10%">
                <button type="button" ng-click="addData()" class="btn btn-primary">ADD</button>
        </td>
        <td style="width:10%">
               <button type="button" class="btn btn-danger">DELETE</button>
                 <!--  <button class="btn btn-danger btn-mini" ng-click="deleteRow(row)" ng-hide="isTemp($index)">
                  <i class="icon-trash icon-white"></i></button> -->
        </td>
     </tr>  
</table> 
<table class="table table-bordered table-hover table-condensed" style="width:100%">
  <tbody>
    <tr style="width:100%" ng-repeat="item in itemData" ng-class-odd="'odd'" ng-class-even="'even'">
        <td style="width:25%"> 
             <span editable-text="item.itemname" e-name="itemname" e-form="rowform" e-required>
                    {{ item.itemname || 'empty' }}
             </span> 
        </td>
        <td style="width:7%"> 
            <span editable-text="item.qty" e-name="qty" e-form="rowform" e-required>
                {{item.qty}}
            </span>    
        </td>
        <td style="width:6%">
            <span editable-text="item.price" e-name="price" e-form="rowform" e-required> 
                {{item.price}}
            </span>    
        </td>
        <td style="width:7%">
            <span editable-text="item.amount" e-name="amount" e-form="rowform" e-required> 
                {{item.amount}}
            </span>    
        </td>
        <td style="width:25%">
            <span editable-text="item.detail" e-name="detail" e-form="rowform" e-required> 
                {{item.detail}}
            </span>    
        </td>
        <td style="width:10%">
            <span editable-text="item.total" e-name="total" e-form="rowform" e-required>
                {{item.total}}
            </span>
        </td>
        <td style="white-space: nowrap; width:10%">
        <!-- form -->
        <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == item">
          <button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
            save
          </button>
          <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
            cancel
          </button>
        </form>

        <!-- <td style="width:10%"> -->
              <button type="button"  ng-show="!rowform.$visible" ng-click="rowform.$show()" class="btn btn-primary">
                            Edit
              </button>   
        </td>
        <td style="width:10%">
               <button type="button" ng-click="deleteItem(item)" class="btn btn-primary">
                          Delete
              </button>  
        </td>
     </tr>  
  </tbody>
</table>   